<template>
  <label class="awesome-switch">
    <input
      type="checkbox"
      :checked="checked"
      @change="$emit('change', $event.target.checked)"
    />
    <span></span>
  </label>
</template>

<script>
export default {
  model: {
    prop: "checked",
    event: "change",
  },
  props: ["checked"],
};
</script>

<style lang="less">
.awesome-switch {
  input {
    display: none;
    &:checked {
      & + span {
        background-color: green;
      }
    }
  }
  span {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
  }
}
</style>